<template>
    <div>
        <!-- 头部 -->
        <div class="category-header">
            <router-link tag="span" to="/index/info"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">会员中心</div>
        </div>

        <!-- vip等级 -->

        <div class="level-detail">
            <span><svg t="1640776439473" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="140354" width="60" height="60"><path d="M376.55893333 523.16539221a131.55745223 67.47780779 0 1 0 263.11490333 0 131.55745223 67.47780779 0 1 0-263.11490333 0Z" fill="#FF5E5E" p-id="140355"></path><path d="M719.28794112 580.93416334v83.01226667c0 21.3598811-16.99081443 38.83614777-38.35069667 38.83614777H336.7518811c-21.3598811 0-38.35069667-17.47626667-38.35069553-38.83614777V580.93416334" fill="#FFFFFF" p-id="140356"></path><path d="M680.93724445 702.78257778h-344.67081444c-21.3598811 0-38.35069667-17.47626667-38.35069668-38.83614777V575.10874112h421.37220779v88.83768889c0 21.3598811-16.99081443 38.83614777-38.35069667 38.83614777zM305.19751111 582.3905189v81.55591111c0 17.47626667 14.07810333 31.55436999 31.0689189 31.55436999h344.67081444c16.99081443 0 31.0689189-14.07810333 31.06891889-31.55436999V582.3905189H305.19751111z" fill="#D12C2C" p-id="140357"></path><path d="M317.81925888 594.52681443h378.65244445v58.25422223c0 18.93262222-15.04900779 33.98163001-33.98162888 33.98163001H351.80088889c-18.93262222 0-33.98163001-15.04900779-33.98163001-33.98163001V594.52681443z" fill="#FFDC45" p-id="140358"></path><path d="M428.98773333 533.3598811L509.08728889 354.22814777s53.39970333 119.42115555 80.58500778 179.61718556l-80.58500778 44.1761189-80.09955556-44.66157113z" fill="#FFFFFF" p-id="140359"></path><path d="M446.94945223 519.28177778C467.8238811 473.16385223 509.08728889 380.928 509.08728889 380.928S550.83614777 473.64930333 571.71057778 519.76723001l-62.13783666 43.20521444-62.62328889-43.69066667z" fill="#FFDC45" p-id="140360"></path><path d="M498.8928 378.50074112l-65.05054777 145.63555555-6.79632668-2.9127111 66.99235555-149.51917114 2.42726002-4.85451776c5.82542222 9.70903666 10.67994112 14.56355555 13.59265109 14.56355556s7.28177778-4.36906667 13.1072-13.1072l1.94180779 4.36906667 67.96325888 151.46097777-81.55591111 56.79786667L507.1454811 575.10874112l76.21594112-53.39970446-63.59419221-142.23739221c-4.36906667 3.88361443-7.76723001 5.33996999-10.19448889 5.33996998-1.94180779 0-5.33996999-2.42725888-10.67994112-6.31087331z" fill="#D12C2C" p-id="140361"></path><path d="M274.12859221 414.90963001l234.95869668 164.08272554H300.82844445z" fill="#FFFFFF" p-id="140362"></path><path d="M288.20669667 439.18222222l205.83158443 143.69374777-176.21902222-3.3981622z" fill="#FFDC45" p-id="140363"></path><path d="M276.0704 418.79324445L304.22660779 575.10874112h193.69528888L276.0704 418.79324445z m244.66773333 164.08272554H297.91573333L267.8177189 420.73505223l18.93262222-4.36906666 233.98779221 166.50998442z" fill="#D12C2C" p-id="140364"></path><path d="M744.53143666 415.88053333L509.08728889 578.99235555h208.25884444z" fill="#FFFFFF" p-id="140365"></path><path d="M729.9678811 435.78405888L534.33078557 577.05054777h165.05362886z" fill="#FFDC45" p-id="140366"></path><path d="M742.10417778 422.19140779l-29.12711111 152.91733333H519.76723001l218.93878442-155.83004445 3.39816335 2.91271112z m-245.15318557 160.19911111h222.8224l30.09801558-159.22820779-14.56355556-10.19448889-238.35686002 169.42269668z" fill="#D12C2C" p-id="140367"></path><path d="M463.94026667 445.97854777l0.97090332 7.28177778c-36.40888889 5.82542222-66.99235555 18.44716999-84.46862222 34.46708224l-4.85451776-5.33997113c18.44716999-17.47626667 50.00154112-30.58346667 88.35223666-36.40888889z m179.61718556 36.89434112l-4.8545189 5.33996999c-16.99081443-16.01991111-46.60337778-28.64165888-83.01226666-34.4670811l0.97090332-7.28177778c37.37979221 6.31087445 68.93416334 19.41807445 86.89588224 36.40888889z" fill="#D12C2C" p-id="140368"></path><path d="M511.02909667 610.54672555l16.01991112 18.93262222c1.45635555 1.94180779 1.45635555 4.36906667 0 6.31087445l-16.01991112 18.93262223c-1.94180779 1.94180779-4.8545189 2.42725888-6.79632668 0.48545222l-0.48545109-0.48545222-16.01991111-18.93262223c-1.45635555-1.94180779-1.45635555-4.36906667 0-6.31087445l16.01991111-18.93262222c1.94180779-1.94180779 4.8545189-2.42725888 7.28177777 0 0-0.48545223 0-0.48545223 0 0z" fill="#FFFFFF" p-id="140369"></path><path d="M511.02909667 618.79940779l8.73813334 10.19448888c1.45635555 1.94180779 1.45635555 4.36906667 0 6.31087332l-8.73813334 10.67994112c-1.94180779 1.94180779-4.8545189 2.42725888-6.79632668 0.48545223l-0.48545109-0.48545223-8.73813333-10.19448889c-1.45635555-1.94180779-1.45635555-4.36906667 0-6.31087445l8.73813333-10.67993998c1.94180779-1.94180779 4.8545189-2.42725888 7.28177777 0 0-0.48545223 0 0 0 0z" fill="#4D97EE" p-id="140370"></path><path d="M510.54364445 610.54672555c-0.48545223-0.48545223-0.48545223-0.48545223 0 0-1.94180779-1.94180779-4.36906667-1.45635555-5.82542223 0l-16.99081443 19.41807445c-0.97090333 1.45635555-0.97090333 3.39816334 0 4.8545189l16.5053622 19.41807331 0.48545223 0.48545224c1.45635555 1.45635555 3.88361443 0.97090333 5.33996999-0.48545224l16.99081558-19.90352554c0.97090333-1.45635555 0.97090333-3.39816334 0-4.8545189l-16.50536334-18.93262222z m21.84533333 14.56355555c3.39816334 3.88361443 3.39816334 10.19448889 0 14.07810447l-16.99081444 19.90352554c-3.88361443 4.36906667-10.67994112 5.33996999-15.53446001 1.45635556l-1.45635556-1.45635556-16.5053622-19.41807445c-3.39816334-3.88361443-3.39816334-10.19448889 0-14.07810333l16.99081443-19.90352554c3.88361443-4.36906667 10.67994112-5.33996999 15.53445888-1.45635556l1.45635555 1.45635556 16.50536335 19.41807331z" fill="#D12C2C" p-id="140371"></path><path d="M514.42725888 346.94636999l6.31087445 9.22358556c0.97090333 1.45635555 0.97090333 3.88361443 0 5.33997l-6.31087445 9.70903779c-1.45635555 2.42725888-4.36906667 2.91271111-6.79632555 0.97090333l-0.97090332-0.97090333-6.31087446-9.22358556c-0.97090333-1.45635555-0.97090333-3.88361443 0-5.33996999l6.31087446-9.7090378c1.45635555-2.42725888 4.36906667-2.91271111 6.79632554-0.97090332l0.97090333 0.97090332z" fill="#FF5E5E" p-id="140372"></path><path d="M507.1454811 378.50074112l0.97090447 0.97090333c1.45635555 0.97090333 3.88361443 0.97090333 5.33996998-0.97090333l12.62174778-17.47626667c0.48545223-1.45635555 0.48545223-2.91271111-0.4854511-4.36906666l-12.13629668-17.47626667-0.97090332-0.97090446c-1.45635555-0.97090333-3.88361443-0.97090333-5.33997113 0.97090446L494.52373333 356.65540779c-0.97090333 1.45635555-0.97090333 2.91271111 0 4.36906666l12.62174777 17.47626667z m-5.82542222 4.36906667l-12.13629554-17.47626667c-2.42725888-3.88361443-2.42725888-8.73813333 0-12.62174891l12.62174777-17.47626666c3.39816334-4.8545189 10.19448889-6.31087445 15.04900779-2.91271112 0.97090333 0.97090333 1.94180779 1.45635555 2.91271111 2.91271112L531.41807445 352.77179221c2.91271111 3.88361443 2.91271111 8.73813333 0 12.62174891l-12.6217489 17.47626667c-3.39816334 4.8545189-10.19448889 6.31087445-15.04900665 2.91271111-0.97090333-0.97090333-1.94180779-1.94180779-2.42726002-2.91271111z" fill="#D12C2C" p-id="140373"></path><path d="M269.27407445 385.7825189l9.70903666 6.31087331c1.94180779 0.97090333 2.42725888 2.91271111 1.94180779 5.33997113l-2.42726002 11.16539221c-0.48545223 2.42725888-2.91271111 4.36906667-5.82542222 3.88361444-0.48545223 0-0.97090333-0.48545223-1.45635556-0.48545109l-9.70903665-6.31087445c-1.45635555-1.45635555-2.42725888-3.39816334-1.94180779-5.33997l2.42726001-11.16539335c0.48545223-2.42725888 2.91271111-4.36906667 5.82542223-3.88361443 0.48545223 0 0.97090333 0.48545223 1.45635555 0.48545223z" fill="#FF5E5E" p-id="140374"></path><path d="M265.39045888 379.47164445c-0.48545223 0-0.97090333-0.48545223-0.97090333-0.48545224-1.94180779-0.48545223-3.88361443 0.97090333-4.36906666 2.91271112l-4.36906667 20.87443c-0.48545223 1.45635555 0.48545223 2.91271111 1.45635556 3.88361444l17.96171889 11.16539335c0.48545223 0 0.97090333 0.48545223 0.97090333 0.48545109 1.94180779 0.48545223 3.88361443-0.97090333 4.36906667-2.91271111l4.36906666-20.87442887c0.48545223-1.45635555-0.48545223-2.91271111-1.45635555-3.88361557l-17.9617189-11.16539221z m21.84533333 5.33996998c3.88361443 2.42725888 5.82542222 7.28177778 4.8545189 11.65084445l-4.36906666 20.87443001c-1.45635555 5.82542222-7.28177778 9.70903666-13.1072 8.2526811-1.45635555-0.48545223-2.42725888-0.97090333-3.39816335-1.45635556l-17.96171776-11.16539221c-3.88361443-2.42725888-5.82542222-7.28177778-4.85451889-11.65084444l4.36906666-20.87443001c1.45635555-5.82542222 7.28177778-9.70903666 13.1072-8.2526811 1.45635555 0.48545223 2.42725888 0.97090333 3.39816334 1.45635555l17.96171776 11.16539221z" fill="#D12C2C" p-id="140375"></path><path d="M753.75502222 385.29706667l-10.67994112 6.79632554c-1.94180779 0.97090333-2.42725888 2.91271111-1.94180665 5.33997113l2.42725888 12.62174777c0.48545223 2.42725888 2.91271111 4.36906667 5.82542222 3.88361444 0.48545223 0 0.97090333-0.48545223 1.45635556-0.4854511l10.67994112-6.79632668c1.94180779-0.97090333 2.42725888-2.91271111 1.94180665-5.33996999l-2.42725888-12.62174777c-0.48545223-2.42725888-2.91271111-4.36906667-5.82542222-3.88361558-0.48545223 0-0.97090333 0-1.45635556 0.48545224z" fill="#FF5E5E" p-id="140376"></path><path d="M757.15318557 379.47164445c0.48545223 0 0.97090333-0.48545223 0.97090332-0.48545224 1.94180779-0.48545223 3.88361443 0.97090333 4.36906666 2.91271112l4.36906667 20.87443c0.48545223 1.45635555-0.48545223 2.91271111-1.45635555 3.88361444l-17.9617189 11.16539335c-0.48545223 0-0.97090333 0.48545223-0.97090332 0.48545109-1.94180779 0.48545223-3.88361443-0.97090333-4.36906667-2.91271111l-4.36906667-20.87442887c-0.48545223-1.45635555 0.48545223-2.91271111 1.45635556-3.88361557l17.9617189-11.16539221z m-3.88361558-6.31087446l-17.96171776 11.16539335c-3.88361443 2.42725888-5.82542222 7.28177778-4.8545189 11.65084445l4.36906667 20.87442887c1.45635555 5.82542222 7.28177778 9.70903666 13.1072 8.25268224 1.45635555-0.48545223 2.42725888-0.97090333 3.39816334-1.45635556l17.96171776-11.16539335c3.88361443-2.42725888 5.82542222-7.28177778 4.8545189-11.65084444l-4.36906667-20.87442888c-1.45635555-5.82542222-7.28177778-9.70903666-13.1072-8.25268224-0.97090333 0.48545223-2.42725888 0.97090333-3.39816334 1.45635556zM311.02293333 625.59573333v-7.28177778h160.68456334v7.28177778zM541.12711111 625.59573333v-7.28177778h160.68456334v7.28177778zM504.71822222 401.31697778H512v118.45025223h-7.28177778zM295.97392555 467.33843001l5.82542222-3.88361558 50.97244444 75.2450378-6.31087331 3.88361444zM716.37523001 467.33843001l-6.31087446-3.88361558-50.48699221 75.2450378 5.82542223 3.88361444z" fill="#D12C2C" p-id="140377"></path></svg></span>
            <p>当前vip等级</p>
            <span class="txt">VIP0</span>
        </div>

        <!-- vip等级内容 -->
        <div class="level-model">
            <div class="level-model-header">
                等级特权
            </div>
            <ul class="level-pure-box">
                <li class="level-pure-item">
                    <img src="//qidian.gtimg.com/hongxium/img/center-level-pri-ba92395e9b.svg" alt="price">
                    <div class="level-pure-item-fontwra">
                        <span>5</span>
                    </div>
                </li>
                <li class="level-pure-item">
                    <img src="//qidian.gtimg.com/hongxium/img/center-level-yue-a756669995.svg" alt="price">
                    <div class="level-pure-item-fontwra">
                        <span class="yue">0</span>
                    </div>
                </li>
                <li class="level-pure-item">
                    <img src="//qidian.gtimg.com/hongxium/img/center-level-ding-dd1e6b5f55.svg" alt="price">
                    <div class="level-pure-item-fontwra">
                        <span class="ding">2500</span>
                    </div>
                </li>
                <li class="level-pure-item">
                    <img src="//qidian.gtimg.com/hongxium/img/center-level-shang-5dd1a0dbf8.svg" alt="price">
                    <div class="level-pure-item-fontwra">
                        <span class="shang">10000</span>
                    </div>
                </li>
                <li class="level-pure-item">
                    <img src="//qidian.gtimg.com/hongxium/img/center-level-song-b16f0abc8f.svg" alt="price">
                    <div class="level-pure-item-fontwra">
                        <span class="song">0</span>
                    </div>
                </li>
            </ul>
        </div>


        <!-- vip规则 -->
        <div class="level-rule">
            <div class="level-rule-header">
                VIP等级特权
            </div>
            <div class="level-pure-ul">
                <p>升级累计消费有价红袖币按照过往12个自然月（计算方法如下）动态计算。</p>
                <p>本月前11个自然月消费总额+当前月消费总额</p>
                <p>累计消费金额的情况包括：使用有价红袖币订阅、打赏、参与网站活动、购买道具等计入消费（仅限Android客户端、M站、PC平台）。</p>
                <p>升级后可享受订阅优惠以及获赠更多的推荐票。</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            
        }
    },
    methods:{
        
    }
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}


//vip样式
.level-detail{
    width: 375px;
    height: 145px;
    margin: auto;
    background-color: rgb(246, 247, 249);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .txt{
        padding-top: 10px;
        color: #DFC1A6;
        font-size: 1.5rem;
    }
}

//vip等级内容
.level-model{
    width: 358px;
    margin: 10px auto;
    .level-model-header{
        width: 358px;
        height: 45px;
        line-height: 45px;
        font-weight: bold;
        font-size: 16px;
    }
    .level-pure-box {
        // padding: .5rem 1rem;
        display: flex;
        width: 358px;
        justify-content: space-between;
        .level-pure-item {
            width: 3.75rem;
            height: 5rem;
            position: relative;
            .level-pure-item-fontwra {
                width: 3rem;
                height: 3rem;
                position: absolute;
                left: 0.375rem;
                bottom: 0.375rem;
                span {
                    font-size: 1rem;
                    display: block;
                    position: absolute;
                    width: 3rem;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    left: 0;
                    top: 0.75rem;
                    color: #FE5879;
                }
            }
        }
    }
}

//vip特权
.level-rule{
    width: 358px;
    margin: 10px auto;
    .level-rule-header{
        width: 358px;
        height: 45px;
        line-height: 45px;
        font-weight: bold;
        font-size: 16px;
    }
    .level-pure-ul {
        width: 358px;
        // padding: .5rem 0;
        line-height: 1.57143rem;
        p{
            // margin: 0 1rem;
            text-align: justify;
        }
    }
}

</style>
